<!-- <template>
  <div class="main">



    <el-input v-model="input" placeholder="请输入内容" style="width:300px;" :prefix-icon="Search"></el-input>
    <el-button type="primary" style="margin-left:20px">添加用户</el-button>


    <el-table :data="goodsList" style="width: 100%;       margin-top:20px;">
      <el-table-column prop="goods_id" label="商品id" />
      <el-table-column prop="goods_name" label="商品名称" width="400" />
      <el-table-column prop="goods_price" label="商品价格" />
      <el-table-column prop="goods_number" label="商品数量" />
      <el-table-column prop="goods_weight" label="商品重量" />



      <el-table-column label="操作">
        <el-button size="small" type="primary">
          <el-icon>
            <Edit />编辑
          </el-icon>
        </el-button>
        <el-button size="small" type="danger">
          <el-icon>
            <DeleteFilled />删除
          </el-icon>
        </el-button>
      </el-table-column>

    </el-table>

    
    <div class="page">

      <el-pagination v-model:currentPage="pagenum" v-model:page-size="pagesize" :page-sizes="[2, 4, 6, 8]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" :default-page-size='pagesize'
        @size-change='sizeChange' @current-change='currentChange' />


    </div>


  </div>
</template>

<script setup>
//设置引入响应式 路由 获取商品数据 图标
import { ref , reactive} from 'vue'
import { useRouter } from 'vue-router'
import { getGoods } from "../../api/user.js";
import { Edit, DeleteFilled, Setting, ArrowRight, Search } from '@element-plus/icons-vue'
let router = useRouter();



let pagenum = ref(1);
let pagesize = ref(10);
let goodsList = ref([]);
let total = ref(0)


let getGoodsData = async () => {
  let data = reactive({
  pagenum: pagenum.value,
  pagesize: pagesize.value,
  }) 
  let res = await getGoods(data);
  console.log(res);
  goodsList.value = res.data.data.goods;
  console.log(goodsList);
  total.value = res.data.data.total;

}
getGoodsData()

//当每页显示条数发生改变时触发
let sizeChange = (value) => {
  pagesize.value = value;
  getGoodsData()
  console.log(pagesize.value);

}

let currentChange = (value) => {

  pagenum.value = value;
  getGoodsData()
  console.log(pagenum.value);
}


</script>


<style>
.main {
  padding: 0px 20px
}
</style> -->


<template>
  <div class="page">
    <div class="btn">
      <div style="width:300px">
        <el-input v-model="keywords" placeholder="请输入内容">
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
      <div class="adduser">
        <el-button type="primary" @click="add">添加商品</el-button>
      </div>
    </div>


        <el-table :data="goodsList" style="width: 100%;       margin-top:20px;">
      <el-table-column prop="goods_id" label="商品id" />
      <el-table-column prop="goods_name" label="商品名称" width="400" />
      <el-table-column prop="goods_price" label="商品价格" />
      <el-table-column prop="goods_number" label="商品数量" />
      <el-table-column prop="goods_weight" label="商品重量" />



      <el-table-column label="操作">
        <el-button size="small" type="primary">
          <el-icon>
            <Edit />编辑
          </el-icon>
        </el-button>
        <el-button size="small" type="danger">
          <el-icon>
            <DeleteFilled />删除
          </el-icon>
        </el-button>
      </el-table-column>

    </el-table>

    
    <div class="page">

      <el-pagination v-model:currentPage="pagenum" v-model:page-size="pagesize" :page-sizes="[2, 4, 6, 8]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" :default-page-size='pagesize'
        @size-change='sizeChange' @current-change='currentChange' />


    </div>









  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
//设置引入响应式 路由 获取商品数据 图标
import { ref, reactive } from 'vue'

import { getGoods } from "../../api/user.js";
import { Edit, DeleteFilled, Setting, ArrowRight, Search } from '@element-plus/icons-vue'
// let router = useRouter();



let pagenum = ref(1);
let pagesize = ref(10);
let goodsList = ref([]);
let total = ref(0)


let getGoodsData = async () => {
  let data = reactive({
    pagenum: pagenum.value,
    pagesize: pagesize.value,
  })
  let res = await getGoods(data);
  console.log(res);
  goodsList.value = res.data.data.goods;
  console.log(goodsList);
  total.value = res.data.data.total;

}
getGoodsData()

//当每页显示条数发生改变时触发
let sizeChange = (value) => {
  pagesize.value = value;
  getGoodsData()
  console.log(pagesize.value);

}

let currentChange = (value) => {

  pagenum.value = value;
  getGoodsData()
  console.log(pagenum.value);
}
let router = useRouter();
let add = () => {
  router.push({
    path: "/add/goods"
  })
}



















</script>
<style scoped>
.btn {
  width: 100%;
  display: flex;
}

.adduser {
  margin-left: 20px;
}
</style>